<!DOCTYPE html>

<!--
eL-CID, Copyright (C) Anglia Polytechnic University, 2003-04, Charles Boisvert, 2004-2012.

eL-CID is free software, and you are welcome to redistribute
it under certain conditions; it comes with ABSOLUTELY NO
WARRANTY; for details read the General Public Licence included
with the distribution.
-->

<html>

<head>
   <title>eL-CID: learn programming, step by step</title>
   <script  src="/config.js" type="text/javascript"> </script>

<script> <!--
var loggedin = false;
--> </script>

   <script  src="/images/loggedin.php" type="text/javascript"> </script>

   <script  src="../elcid.js" type="text/javascript"> </script>
   <script  src="editor.js" type="text/javascript"> </script>

<script> <!--

var editorIsOn = true;

var rewOn = new Image(); rewOn.src = '../images/rew_red.gif';
var rewOff = new Image(); rewOff.src = '../images/rew.gif';
var rewDis = new Image(); rewDis.src = '../images/rew_grey.gif';

var backOn = new Image(); backOn.src = '../images/back_red.gif';
var backOff = new Image(); backOff.src = '../images/back.gif';
var backDis = new Image(); backDis.src = '../images/back_grey.gif';

var stepOn = new Image(); stepOn.src = '../images/step_red.gif';
var stepOff = new Image(); stepOff.src = '../images/step.gif';
var stepDis = new Image(); stepDis.src = '../images/step_grey.gif';

var ffdOn = new Image(); ffdOn.src = '../images/ffd_red.gif';
var ffdDis = new Image(); ffdDis.src = '../images/ffd_grey.gif';
var ffdOff = new Image(); ffdOff.src = '../images/ffd.gif';

var iterateTabOn = new Image(); iterateTabOn.src = '../images/iterateTabOn.png';
var iterateTabOff = new Image(); iterateTabOff.src = '../images/iterateTabOff.png';

var commentsTabOn = new Image(); commentsTabOn.src = '../images/commentsTabOn.png';
var commentsTabOff = new Image(); commentsTabOff.src = '../images/commentsTabOff.png';

var editTabOn = new Image(); editTabOn.src = '../images/editTabOn.png';
var editTabOff = new Image(); editTabOff.src = '../images/editTabOff.png';

var XMLTabOn = new Image(); XMLTabOn.src = '../images/XMLTabOn.png';
var XMLTabOff = new Image(); XMLTabOff.src = '../images/XMLTabOff.png';

var formTabOn = new Image(); formTabOn.src = '../images/formTabOn.png';
var formTabOff = new Image(); formTabOff.src = '../images/formTabOff.png';

var fileTabOn = new Image(); fileTabOn.src = '../images/fileTabOn.png';
var fileTabOff = new Image(); fileTabOff.src = '../images/fileTabOff.png';

--> </script>

   <link rel="stylesheet" type="text/css" href="../images/code.css">
   <title></title>
   <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
</head>

<body
   onload = "controls=document.forms.controls; controls.fontsize.value = area.fontSize; controls.enabled=true; postit=extendPost('postit'); loadfile();"
>

<div id="postit"
     onMouseDown = "startDrag(this,event.clientX,event.clientY);"
     onMouseUp = "this.beingDragged=false;"
     onMouseout = "this.beingDragged=false;"
     onMouseMove = "movePost(this,event.clientX,event.clientY);"
>
</div>

<form name="controls" action="" onSubmit="return false;" style="height:100%;">

<div id="playerbuttons" >
    <button onClick="track_rewind()"
           onMouseOver="this.focus()"
           onMouseout="this.blur()"
           onFocus="swapImg(this,rewOn)"
           onBlur="swapImg(this,rewOff)"
           name="rewindButton">
      <img src="../images/rew.gif" alt="Rewind the animation back to start" width="44" height="20">
   </button>
   <button onClick="back();"
           onMouseOver="this.focus()"
           onMouseout="this.blur()"
           onFocus="swapImg(this,backOn)"
           onBlur="swapImg(this,backOff)"
           name="backButton">
      <img src="../images/back.gif" alt="Step back one change" width="44" height="20">
   </button>
   <button onClick="forward();"
           onMouseOver="this.focus()"
           onMouseout="this.blur()"
           onFocus="swapImg(this,stepOn)"
           onBlur="swapImg(this,stepOff)"
           name="forwardButton">
      <img src="../images/step.gif" alt="Step forward one change" width="44" height="20">
   </button>
   <button onClick="fast();"
           onMouseOver="this.focus()"
           onMouseout="this.blur()"
           onFocus="swapImg(this,ffdOn)"
           onBlur="swapImg(this,ffdOff)"
           name="ffdButton">
      <img src="../images/ffd.gif" alt="Fast forward to the final state" width="44" height="20">
   </button>

</div>

<div id="filestatus">
   Animation:<tt><span id="filename"></span></tt>
   <img src="../images/notRated.png" alt="Rating is disabled for tutorials you are editing" name="el_icon" width="85" height="20" border="0"> <br />
</div>

<div id = "pb"> </div>

<div id="maincontent">

   <iframe src="../code.html" width="49%" height="500" name="code" id="code">
   </iframe>
   
   <iframe src="xmlsource.html" width="49%" height="90%" name="elcidTutorial" id="elcidTutorial">
   </iframe>

   <table width="100%" style="border: 0px;" cellpadding=0 cellspacing=0>
      <tr>
      <td bgcolor="BBBBBB" height=2 width="49%"> </td>
      <td width="1%"> </td>
      <td bgcolor="BBBBBB" height=2 width="49%"> </td>
      </tr>
      <tr>
      <td>
         <img src="../images/iterateTabOn.png" name="iterateTab"
              onClick="showIterate();" alt="View the preset example">
         <img src="../images/commentsTabOff.png" name="commentsTab"
              onClick="showComments();" alt="Aggregrate all the yellow labels">
         <img src="../images/editTabOff.png" name="editTab"
              onClick="editCode();" alt="Edit the code yourself">
      </td>
      <td>&nbsp;</td>
      <td>
         <img src="../images/formTabOn.png" name="formTab"
              onClick="formEditor();" alt="Edit the tutorial in a form">
         <img src="../images/XMLTabOff.png" name="XMLTab"
              onClick="viewXML();" alt="View the XML">
         <input type="button" value="Delete step" onClick ="deleteStep();">
         <input type="button" value="Insert step" onClick ="insertStep();">
         <input type="button" name="save" value="Save" onClick="uploadXML();">

      </td>
      </tr>
    </table>
</div>

<div id="interpreters">
   View:
   <select name="interpreter">
      <option value="../runcode.html" selected="selected">Open in browser</option>
      <option value="../runsqlquery.html">Send SQL query</option>
      <option value="../runjstest.html" id="jstest">Test Javascript function</option>
      <option value="../runphpfiddle.html" id="phpcode">Send to PHP interpreter</option>
      <option value="../runaspcode.html" id="aspcode" disabled="disabled">Send to ASP interpreter - disabled</option>
   </select>
   <input type="button" name="runButton" value="Go" onClick="runCode();">
</div>

<div id="commands">
    <button onClick="monitorUsage('print'); code.focus(); code.print();">
        <img src="../images/print.gif" width="18" height="16">
    </button>
    <input type="button" value="File manager" onClick="fileManager();">
   Text size: <input type="text" name="fontsize" value="" size="5">
   <input type="button" value="OK" onClick="updateFontSize();">
</div>

</form>

</body>
</html>

